<template>
  <!--  传输设备/光板端口信/端口详情  -->
  <el-dialog
    width="800px"
    :title="$t('PORT_DETAILS')"
    :visible="portListVisible"
    append-to-body
    @close="close"
  >
    <div class="flex flex-column">
      <div class="mb-10">
        <el-button type="primary" icon="el-icon-plus" :disabled="selectPorts.length === 0" @click="batchEditPort">{{
          $t('BATCH_EDIT_PORT')
        }}</el-button>
      </div>
      <el-table ref="netPortList" :data="netPortList" class="w-100 mb-20" height="100%" border @selection-change="selectionChange">
        <template slot="empty">
          <NullData />
        </template>
        <el-table-column type="selection" width="45" fixed="left" />
        <el-table-column :label="$t('PORT')" type="index" align="center" width="80" />
        <el-table-column :label="$t('IS_MODULE_ON')" align="center" width="120">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.isInsert"
              size="mini"
              :disabled="getDisabled(scope.row.litPortList)"
              @change="isInsertChange(scope.row, $event)"
            >
              <el-option :label="$t('OK_YES')" :value="true" />
              <el-option :label="$t('OK_NO')" :value="false" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('INTERFACE_TYPE')" align="center" width="120">
          <template slot-scope="scope">
            <el-select
              v-if="scope.row.isInsert"
              v-model="scope.row.interfaceType"
              size="mini"
              :disabled="getDisabled(scope.row.litPortList)"
            >
              <el-option
                v-for="(item, index) in dictList.OPTICAL_INTERFACE_TYPE"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('MODULE_TYPE')" align="center">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isInsert" v-model="scope.row.moduleType" size="mini">
              <el-option
                v-for="(item, index) in dictList.OPTICAL_MODULE_TYPE"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('RATE')" align="center">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isInsert" v-model="scope.row.moduleRate" size="mini">
              <el-option
                v-for="(item, index) in dictList.MODULE_RATE"
                :key="index"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('WAVELENGTH')" align="center">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isInsert" v-model="scope.row.waveLength" size="mini">
              <el-option
                v-for="(item, index) in dictList.MODULE_WAVELENGTH"
                :key="index"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('YES') }}</el-button>
    </template>
    <!--批量修改-->
    <el-dialog
      width="800px"
      :title="$t('BATCH_SETTINGS')+$t('PORT')"
      :visible="innerportListVisible"
      append-to-body
      @close="innerclose"
    >
      <div class="flex flex-column">
        <el-table :data="batchSetPorts" border class="w-100 mb-20">
          <el-table-column :label="$t('IS_MODULE_ON')" align="center" width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.isInsert"
                size="mini"
                :disabled="getDisabled(scope.row.litPortList)"
                @change="isInsertChange(scope.row, $event)"
              >
                <el-option :label="$t('OK_YES')" :value="true" />
                <el-option :label="$t('OK_NO')" :value="false" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('INTERFACE_TYPE')" align="center" width="120">
            <template slot-scope="scope">
              <el-select
                v-if="scope.row.isInsert"
                v-model="scope.row.interfaceType"
                size="mini"
                :disabled="getDisabled(scope.row.litPortList)"
              >
                <el-option
                  v-for="(item, index) in dictList.OPTICAL_INTERFACE_TYPE"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('MODULE_TYPE')" align="center">
            <template slot-scope="scope">
              <el-select v-if="scope.row.isInsert" v-model="scope.row.moduleType" size="mini">
                <el-option
                  v-for="(item, index) in dictList.OPTICAL_MODULE_TYPE"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('RATE')" align="center">
            <template slot-scope="scope">
              <el-select v-if="scope.row.isInsert" v-model="scope.row.moduleRate" size="mini">
                <el-option
                  v-for="(item, index) in dictList.MODULE_RATE"
                  :key="index"
                  :label="item.label"
                  :value="Number(item.value)"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('WAVELENGTH')" align="center">
            <template slot-scope="scope">
              <el-select v-if="scope.row.isInsert" v-model="scope.row.waveLength" size="mini">
                <el-option
                  v-for="(item, index) in dictList.MODULE_WAVELENGTH"
                  :key="index"
                  :label="item.label"
                  :value="Number(item.value)"
                />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template v-slot:footer>
        <el-button @click="innerSure">{{ $t('YES') }}</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deepClone } from '@/utils/common'
  export default {
    name: 'ShelfPorts',
    props: {
      lightBoardPortLists: {
        type: Array,
        default: () => []
      },
      portListVisible: {
        type: Boolean,
        default: false
      },
      bizPortList: {
        type: Object,
        default: () => {}
      },
      type: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        editableTabsValue: '',
        currentActiveTabIndex: 0,
        selectPorts: [],
        batchSetPorts: [{
          interfaceType: '',
          isInsert: true,
          moduleRate: '',
          moduleType: '',
          waveLength: ''
        }],
        innerportListVisible: false
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      netPortList() {
        return this.lightBoardPortLists
      }
    },
    methods: {
      selectionChange(val) {
        // console.log(val)
        const arr = []
        val.forEach(i => {
          // 获取每行的索引
          const index = this.netPortList.indexOf(i)
          arr.push(index)
        })
        this.selectPorts = arr
      },
      batchEditPort() { // 批量编辑端口
        this.innerportListVisible = true
      },
      getDisabled(litPortList) {
        if (this.type === 'add' || !litPortList) {
          return false
        }
        return litPortList.some(
          i => this.bizPortList[i.portId] && this.bizPortList[i.portId] !== 'IDLE'
        )
      },
      isInsertChange(row, event) {
        if (!event) {
          row.interfaceType = null
          row.moduleRate = null
          row.moduleType = null
          row.waveLength = null
        }
      },
      innerclose() {
        this.innerportListVisible = false
      },
      innerSure() {
        const obj = this.batchSetPorts[0]
        if (obj.isInsert && !(obj.isInsert && obj.moduleType && obj.interfaceType && obj.moduleRate && obj.waveLength)) {
          this.$message.error(this.$t('SELECT_ALL'))
          return false
        } else {
          this.innerportListVisible = false
          this.selectPorts.forEach(i => {
            this.netPortList[i] = Object.assign(this.netPortList[i], obj)
          })
        }
      },
      close() {
        this.$refs.netPortList.clearSelection()
        // console.log('this.netPortList', this.netPortList)
        if (
          this.netPortList.some(
            i =>
              i.isInsert &&
              !(i.isInsert && i.moduleType && i.interfaceType && i.moduleRate && i.waveLength)
          )
        ) {
          this.$message.error(this.$t('SELECT_ALL'))
          return false
        } else {
          this.$emit('close')
        }
      }
    }
  }
</script>

<style></style>
